<template>
	<view class="page">
		<uni-card class="content">
			<uni-forms ref="form" :modelValue="formData" label-width="100px" :rules="formRules">
				<uni-forms-item label="开始时间" required name="startTime">
					<uni-datetime-picker type="datetime" v-model="formData.startTime"/>
				</uni-forms-item>
				<uni-forms-item label="结束时间" required name="endTime">
					<uni-datetime-picker type="datetime" v-model="formData.endTime"/>
				</uni-forms-item>
				<uni-forms-item label="请假事由" required name="leaveReason">
					<uni-easyinput type="textarea" v-model="formData.leaveReason" placeholder="请输入备注" />
				</uni-forms-item>
				<uni-forms-item label="图片">
					<button size="mini;" type="primary"
						style="border-radius: 5px;font-size:10px;width: 70px;" @click="uploadPic()"
						v-if="!formData.fileList[0].fileId">
						上传图片</button>
					<view v-else
						style="display: flex;flex-direction: row;align-items: center;">
						<view @click="openPic()" style="width: 50px;height: 50px;">
							<image mode="aspectFit" :src="formData.fileList[0].url"
								style="width: 50px;height: 50px;"></image>
							<!-- <image mode="aspectFit" src="https://img1.baidu.com/it/u=303165219,786530547&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1424"
								style="width: 50px;height: 50px;"></image> -->							
						</view>
						<uni-icons type="close" size="20" color="#acacac;"
							@click="deletePic()"></uni-icons>
					</view>
				</uni-forms-item>
			</uni-forms>
		</uni-card>
		<button  type="primary" @click="submit">提交</button>
		<!-- <view>1111{{formData.fileList}}</view> -->
		<uni-popup ref="IMAGE">
			<view>
				<image mode="aspectFit" :src="formData.fileList[0].url"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { newLeaveApi } from '@/common/api/timeleave'
	import { upload } from '@/common/api/user'
	export default {
		data() {
			return {
				formData: {
					leaveReason: '',
					startTime: null,
					endTime: null,
					fileList: [{
						fileId: '',
						name: '',
						url: ''
					}],
				},
				formRules: {
					startTime : {
						rules: [{
							required: true,
							errorMessage: '开始时间不能为空'
						}]
					},
					endTime : {
						rules: [{
							required: true,
							errorMessage: '结束时间不能为空'
						}]
					},
					leaveReason : {
						rules: [{
							required: true,
							errorMessage: '请假事由不能为空'
						}]
					},
				},
				picUrl: null,
				isPic: false,
				range: {
					startDay: null,
					endDay: null
				},
				index1: 0,
				index2: 1,
				start: null,
				end: null,
			}
		},
		onLoad() {
			// 从本地存储获取字符串
			const userString = uni.getStorageSync('info');
			
			// 将字符串解析为对象
			const user = userString ? JSON.parse(userString) : null;
			this.id = user.userId
		
		},
		methods: {
			submit() {
				this.$refs['form'].validate().then(res => {
					// this.formData.userId = this.id
					console.log('success', res, this.formData);
					// return
					newLeaveApi(this.formData).then(res => {
						console.log(res, 'res')
						if(res.data === 'success') {
							uni.navigateBack()
							uni.showToast({
							  title: '申请已提交',
								icon: 'none',
							    duration: 2000
							});
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			uploadPic() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const imagePath = res.tempFilePaths[0]
						// 从本地获取 token
						const token = uni.getStorageSync('App-Token');
						uni.uploadFile({
							url: '/api/system/file/upload',
							filePath: imagePath,
							name: 'file',
							timeout: 60000,
							method: 'POST',
							header: {
								'Authorization': token ? `Bearer ${token}` : '', // 添加 token
							},
							success: (uploadFileRes) => {
								const data = JSON.parse(uploadFileRes.data)
								console.log('data', data)
								if (data.success) {
									this.formData.fileList = [{
										fileId: data.data.fileId,
										name: data.data.logicalName,
										url: data.data.prePath + data.data.fileName
									}]
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none',
									})
								}
							},
							fail: (err) => {
								console.log('上传失败', err)
								uni.showToast({
									title: '上传失败',
									icon: 'none',
								})
							}
						})
					},
					fail: (err) => {
						console.log('选择图片失败', err)
					}
				})
			},
			deletePic() {
				this.formData.fileList = [{
					fileId: '',
					name: '',
					url: ''
				}]
			},
			openPic() {
				this.$refs.IMAGE.open()
			},
		}
	}
</script>


<style lang="less">
	.page {
		overflow: hidden;
	}
	button {
		margin: 15px;
	}
</style>